<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch侦听器</title>
    <script src="../lib/vue-2.6.12.js"></script>
    <script src="../lib/jquery-3.5.1.js"></script>
    <link href="../image/favicon.ico" rel="shortcut icon">
</head>
<body>
    <div id="app">
      <input type="text" v-model="username">
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data: {
          username: '',
        },
        // 所有的侦听器,都应该被定义到 watch 节点下
        watch: {
          // 侦听器本质是一个函数,要侦听哪个数据的变化,就把数据名作为方法名即可
          username(newVal,oldVal) {
              console.log('侦听到 username 变化了',newVal,oldVal)
              // 如果输入为空,则不发出请求
              if (newVal === '') return
              // 1.调用 jQuery 中的 Ajax 发起请求,判断 newVal 是否被占用
              $.get('https://www.escook.cn/api/finduser/' + newVal,function (result) {
                  console.log(result)
              })


          }
        },
        methods: {

        }
      })
    </script>
</body>
</html>